<template>
  <default-layout>
    <header-close text="更换手机号" slot="header">
      <mt-button slot="right" v-if="step === 2" @click="forward">上一步</mt-button>
    </header-close>
    <div slot="main" class="scroll-view router-in-transition">
      <transition name="fade" mode="out-in">
        <div v-if="step === 1" class="form" key="form0">
          <div class="form" key="form0">
            <yd-cell-group>
              <yd-cell-item>
                <span slot="left" class="label required">手机号：</span>
                <xf-input
                  :valid="[{required: true, msg: '请输入手机号'}, {reg: $regex.phone, msg: '请输入正确的手机号'}]"
                  v-model.trim="form.phoneNum"
                  ref="phoneNum"
                  slot="right"
                  :showIcon="false"
                  placeholder="请输入请输入手机号"></xf-input>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">验证码：</span>
                <xf-input
                  :valid="[{required: true, msg: '请输入验证码'}]"
                  v-model.trim="form.phoneCode"
                  ref="phoneCode"
                  slot="right"
                  :showIcon="false"
                  class="full-input"
                  placeholder="请输入验证码"></xf-input>
                <mt-button
                  size="small"
                  type="primary"
                  plain
                  :disabled="count > 0"
                  @click="sendCode"
                  slot="right">{{count > 0 ? `${count}s` : '获取验证码'}}</mt-button>
              </yd-cell-item>
            </yd-cell-group>
            <div class="next">
              <mt-button type="primary" size="large" @click="next">下一步</mt-button>
            </div>
          </div>
        </div>
        <div key="form1" v-if="step === 2">
          <div class="form">
            <yd-cell-group>
              <yd-cell-item>
                <span slot="left" class="label required">新密码：</span>
                <xf-input
                  :valid="[{required: true, msg: '请输入新密码'}]"
                  v-model="form.pwd"
                  ref="pwd"
                  slot="right"
                  :showIcon="false"
                  type="password"
                  v-focus
                  class="full-input"
                  placeholder="请输入新密码"></xf-input>
              </yd-cell-item>
              <yd-cell-item>
                <span slot="left" class="label required">确认密码：</span>
                <xf-input
                  :valid="[{required: true, msg: '请重复输入新密码'}]"
                  v-model="form.rePwd"
                  ref="rePwd"
                  slot="right"
                  type="password"
                  :showIcon="false"
                  placeholder="请重复输入新密码"></xf-input>
              </yd-cell-item>
            </yd-cell-group>
          </div>
          <div class="next">
            <mt-button type="primary" size="large" @click="onSubmit">提交</mt-button>
          </div>
        </div>
      </transition>
    </div>
  </default-layout>
</template>
<script>
  import XfInput from '../../../components/xf-input/xf-input.vue'
  import DefaultLayout from '../../../layouts/default-layout/default-layout'
  import HeaderClose from '../../../components/header-close/header-close'
  import {validate} from '../../../common/js/util'

  export default {
    components: {
      HeaderClose,
      DefaultLayout,
      XfInput},
    data() {
      return {
        form: {
          phoneNum: '', // 手机号
          phoneCode: '', // 验证码
          pwd: '', // 密码
          rePwd: '' // 重复新密码
        },
        step: 1,
        count: 0,
        retry: false
      }
    },
    methods: {
      forward() {
        this.step--
      },
      next() {
        validate.bind(this)({phoneNum: '', phoneCode: ''}).then(() => {
          this.step++
        })
      },
      resetCount() {
        this.count = 0
        this.retry = true
        clearInterval(this.timer)
      },
      sendCode() {
        validate.bind(this)({phoneNum: ''}).then(() => {
          this.$post('/sapi/pwd/getPhoneCode', {
            phoneNumber: this.form.phoneNum
          }, loading => { this.$message.loading(loading) }).then(res => {
            this.startCount()
            this.$message.toast(res.message)
          })
        })
      },
      startCount() {
        this.count = 60
        this.retry = false
        clearInterval(this.timer)
        this.timer = setInterval(() => {
          if (this.count <= 0) {
            clearInterval(this.timer)
            this.retry = true
            return
          }
          this.count--
        }, 1000)
      },
      onSubmit() {
        validate.call(this, this.form).then(() => {
          if (this.form.pwd !== this.form.rePwd) {
            this.$message.toast('两次密码输入不一致！')
            return
          }
          this.$post('/sapi/pwd/resetPwdByPhone', this.form, loading => { this.$message.loading(loading) }).then(res => {
            this.$message.alert(res.message).then(() => {
              this.$router.back()
            })
          })
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "../../../common/style/variable";
  .scroll-view{
    overflow-x: hidden;
  }
  .next{
    margin: .2rem 0;
  }
  .tip{
    padding: .5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    margin: 0 0 .2rem 0;
    font-size: .32rem;
    color: #666;
    .num{
      color: #333;
      margin: .15rem 0 0 0;
    }
    .primary{
      color: $primary;
    }
    .light{
      margin: .15rem 0 0 0;
      color: #999;
      font-size: .3rem;
    }
  }
  .old-phone{
    padding: .2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ededed;
    .left{
      display: flex;
      align-items: center;
    }
    .label{
      color: $label;
    }
    .phone{
      padding: 0 .2rem;
    }
  }
  .full-input{
    flex: 1;
  }
</style>
